<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head><link rel="stylesheet" type="text/css" href="description/Combined.css,0:HeaderFooterSprite,0:Header.NonMtps,1:LinkList;/Areas/Centers/Themes/StandardDevCenter/Content:0,/Areas/Epx/Themes/Base/Content:1&amp;amp;hashKey=E26C1359372FE948C3C39B3F0FB94413" xmlns="http://www.w3.org/1999/xhtml" />
<link type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml" />
<link rel="stylesheet" type="text/css" href="description/bb109254-3547-49cb-8ea9-0f4aba91ee72Combined.css,0:HeaderFooterSprite,0:Footer.NonMtps,1:LinkList;/Areas/Centers/Themes/StandardDevCenter/Content:0,/Areas/Epx/Themes/Base/Content:1&amp;amp;hashKey=76DF6246C5394201214B48DD1A8F406B" xmlns="http://www.w3.org/1999/xhtml" />
<link type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SharePoint 2013: Localize the app web, host web, and remote components of an app</title>
        <link href="description/Galleries.css" type="text/css" rel="Stylesheet" /><link href="description/Layout.css" type="text/css" rel="Stylesheet" /><link href="description/Brand.css" type="text/css" rel="Stylesheet" />
        <link href="description/iframedescription.css" rel="Stylesheet" type="text/css" />
        <script src="description/offline.js" type="text/javascript"></script>
        <style type="text/css">
            #projectInfo {
                overflow: auto;
            }
            #longDesc {
                clear:both;
                margin: 25px 0 10px 0;
            }

            #SampleIndexList{
                margin-left: 15px;
            }
        </style>
    </head>
<body>
    <div id="offlineDescription">
        <h1>SharePoint 2013: Localize the app web, host web, and remote components of an app</h1>
        <br/>
        <div id="projectInfo">
            <div class="section">
                    <div class="itemBarLong tagsContainer">
                        <label for="Technologies">Technologies</label>
                        <div id="Technologies">
                            Javascript, SharePoint Server 2013, SharePoint Foundation 2013, apps for SharePoint
                        </div>
                    </div>
                    <div class="itemBarLong tagsContainer">
                        <label for="Topics">Topics</label>
                        <div id="Topics">
                            Data Access, User Experience
                        </div>
                    </div>
                <div class="itemBarLong">
                    <label for="Platforms">Platforms</label>
                    <div id="Platforms">
                        Web, Cloud
                    </div>
                </div>
                <div class="itemBarLong">
                    <label for="Requirements">Requirements</label>
                    <div id="Requirements">
                        
                    </div>
                </div>
                <div class="itemBar">
                    <label for="LastUpdated">Primary language</label>
                    <div id="LastUpdated">en-US</div>
                </div>
                <div class="itemBar">
                    <label for="LastUpdated">Updated</label>
                    <div id="LastUpdated">5/16/2014</div>
                </div>
                <div class="itemBarLong">
                    <label for="License">License</label>
                    <div id="License">
                        <a href="license.rtf">Apache License, Version 2.0</a></div>
                </div>
                <div class="itemBar">
                    <div class="viewonlinecont">
                        <a data-link="online" href="http://code.msdn.microsoft.com/SharePoint-2013-Bookstore-328060fc">View this sample online</a>
                    </div>
                </div>
            </div>
        </div>
        
                   
<script type="text/javascript">
    function initializePage() {
        var otherTabClass = 'otherTab';
        var hiddenPreClass = 'hidden';

        var htmlDecode = function(encodedData) {
            var decodedData = "";
            if (encodedData) {
                var div = document.createElement('div');
                div.innerHTML = encodedData;
                decodedData = div.firstChild.nodeValue.replace( /\\r\\n/ig , '\r\n');
            }
            return decodedData;
        };
                
        Galleries.iterateElem(Galleries.findElem(null, 'div', 'scriptcode'), function (index, scriptBlock) {
            var titleElem = Galleries.findElem(scriptBlock, 'div', 'title')[0];
            var labelElems = Galleries.findElem(titleElem, 'span');
            if (labelElems.length == 0) {
                labelElems = titleElem;
            }
            var languageSpans = Galleries.findElem(scriptBlock, 'span', 'hidden');
            var pres = Galleries.findElem(scriptBlock, 'pre');
            if (languageSpans.length > 0 && pres.length > 1) {
                Galleries.iterateElem(labelElems, function(index, elem) {
                    var codePre = pres[index];
                    var labelSpan = elem;
                    var languageSpan = languageSpans[index];
                            
                    elem.code = codePre.innerHTML.replace( /(\r(\n)?)|((\r)?\n)/ig , '\\r\\n');
                            
                    codePre.className = codePre.className.replace(hiddenPreClass, '');
                            
                    languageSpan.parentNode.removeChild(languageSpan);
                });

                pres = Galleries.findElem(scriptBlock, 'pre');
                Galleries.iterateElem(labelElems, function(index, elem) {
                    var codePre = pres[index];
                    var labelSpan = elem;
                    if (index == 0) {
                        scriptBlock.activeTab = 0;
                    }
                    else {
                        labelSpan.className += otherTabClass;
                        codePre.className += hiddenPreClass;
                    }
                    Galleries.attachEventHandler(labelSpan, 'click', function(e) {
                        var activeTab = scriptBlock.activeTab;
                        labelElems[activeTab].className += otherTabClass;
                        pres[activeTab].className += hiddenPreClass;

                        codePre.className = codePre.className.replace(hiddenPreClass, '');
                        labelSpan.className = labelSpan.className.replace(otherTabClass, '');
                        scriptBlock.activeTab = index;
                    });
                });

                var preview = Galleries.findElem(scriptBlock, 'div', 'preview');
                if (preview.length == 0) {
                    preview.push(pres[pres.length - 1]);
                }
                Galleries.iterateElem(preview, function(index, elem) {
                    elem.parentNode.removeChild(elem);
                });

                if (window.clipboardData && clipboardData.setData) {
                    var copyLink = document.createElement('a');
                    copyLink.href = 'javascript:void(0);';
                    copyLink.className = 'copyCode';
                    copyLink.innerHTML = 'Copy code';
                    Galleries.attachEventHandler(copyLink, 'click', function (e) {
                        clipboardData.setData("Text", htmlDecode(labelElems[scriptBlock.activeTab].code));
                        return false;
                    });
                    scriptBlock.insertBefore(copyLink, scriptBlock.childNodes[0]);
                }
            }
        });
    }

    Galleries.onWindowLoad(function(){
        initializePage();
    });

</script>
<div id="longDesc">
    
<div id="header">
<table id="bottomTable" cellspacing="0" cellpadding="0">
<tbody>
<tr id="headerTableRow1">
<td align="left"><span id="runningHeaderText">&nbsp;</span></td>
</tr>
<tr id="headerTableRow2">
<td align="left"><span id="nsrTitle">SharePoint 2013: Localize the app web, host web, and remote components of an app</span></td>
</tr>
</tbody>
</table>
</div>
<div id="mainSection">
<div id="mainBody">
<div class="summary">
<p><span class="label">Summary:</span>&nbsp;&nbsp;This sample simulates a bookstore by using a SharePoint 2013 document library in which every document is a book. End users can request and buy new books by using the provided custom actions. The components
 of the app are localized for English and Spanish.</p>
</div>
<div class="introduction">
<p><strong>Last modified: </strong>May 16, 2014</p>
<p><strong>In this article</strong><br>
<a href="#sectionSection0"></a><br>
<a href="#sectionSection1">Prerequisites</a><br>
<a href="#sectionSection2">Key components of the sample</a><br>
<a href="#sectionSection3">Configure the sample</a><br>
<a href="#sectionSection4">Run and test the sample</a><br>
<a href="#sectionSection5">Troubleshooting</a><br>
<a href="#sectionSection6">Change log</a><br>
<a href="#sectionSection7">Related content</a></p>
</div>
<a name="O15Readme_Description"></a><a name="sectionSection0"></a>
<div class="section" id="sectionSection0">
<p>This sample includes a remote app that has webpages to handle the book request and book buying experiences in a simulated bookstore. Custom actions provide the link between the document library and the app pages. The cross-domain library provides data access
 from the remote app to the document library. The chrome control and SharePoint style sheet provide the classes to consistently style the app pages. A custom list provides storage for the orders placed by the end user. End users can use the provided app part
 to display the orders history.</p>
<p>The app can be installed in a SharePoint website provisioned in English (en-US) or Spanish (es-ES). The following app components are localized:</p>
<ul>
<li>
<p>App title</p>
</li><li>
<p>Custom lists</p>
</li><li>
<p>SharePoint page</p>
</li><li>
<p>Custom actions</p>
</li><li>
<p>App part</p>
</li><li>
<p>Web application pages</p>
</li><li>
<p>Chrome control</p>
</li></ul>
<p>Figure 1 shows the bookstore custom actions in English and Spanish.</p>
<div class="caption"><strong>Figure 1. Bookstore custom actions in English and Spanish</strong></div>
<br>
<img id="114765" src="description/image.png" alt="" width="663" height="515"></div>
<a name="O15Readme_Prereq"></a><a name="sectionSection1"></a>
<h2 class="heading">Prerequisites</h2>
<div class="section" id="sectionSection1">
<p>This sample requires the following:</p>
<ul>
<li>
<p>Microsoft Visual Studio 2013</p>
</li><li>
<p>Office Developer Tools for Visual Studio 2013 March, 2014, version or later.</p>
</li><li>
<p>A SharePoint 2013 development environment configured for apps</p>
</li></ul>
</div>
<a name="O15Readme_components"></a><a name="sectionSection2"></a>
<h2 class="heading">Key components of the sample</h2>
<div class="section" id="sectionSection2">
<p>The sample contains the following:</p>
<ul>
<li>
<p><strong>BookstoreApp project</strong>, which contains the following components:</p>
<ul>
<li>
<p>Request a book custom action</p>
</li><li>
<p>But this book custom action</p>
</li><li>
<p>My orders app part</p>
</li><li>
<p>Orders custom list</p>
</li><li>
<p>Order status custom list</p>
</li><li>
<p>Home SharePoint page</p>
</li><li>
<p>App web resource files</p>
</li><li>
<p>Host web resource files</p>
</li><li>
<p>JavaScript resource files</p>
</li></ul>
<p>&nbsp;</p>
</li><li>
<p><strong>BookstoreWeb project</strong>, which contains the following components:</p>
<ul>
<li>
<p>BookOrders app page and JavaScript file</p>
</li><li>
<p>BookPurchase app page and JavaScript file</p>
</li><li>
<p>BookRequest app page and JavaScript file</p>
</li><li>
<p>ChromeLoader JavaScript file</p>
</li><li>
<p>Common JavaScript file</p>
</li><li>
<p>StyleLoader JavaScript file</p>
</li><li>
<p>Resource files</p>
</li><li>
<p>JavaScript resource files</p>
</li></ul>
</li></ul>
</div>
<a name="O15Readme_config"></a><a name="sectionSection3"></a>
<h2 class="heading">Configure the sample</h2>
<div class="section" id="sectionSection3">
<p>Update the <strong>SiteUrl</strong> property of the solution with the URL of your SharePoint website. This should be an American English (en-US) site collection.</p>
</div>
<a name="O15Readme_test"></a><a name="sectionSection4"></a>
<h2 class="heading">Run and test the sample</h2>
<div class="section" id="sectionSection4">
<p>You can test the sample by deploying it to an English SharePoint website, to a Spanish SharePoint website and to a French SharePoint website.</p>
<div class="subSection">
<ol>
<li>
<p>Press F5 to build and deploy the app.</p>
</li><li>
<p>In the <span class="ui">Grant permissions to the App</span> page, click <span class="ui">
Trust It</span>.</p>
</li><li>
<p>Follow the instructions on the SharePoint page.</p>
<p>Request a book by using the Ribbon custom action. Buy a book by using the ECB custom action.</p>
<p>Figure 2 shows the bookstore app start page.</p>
<div class="caption"><strong>Figure 2. Bookstore app start page</strong></div>
<br>
<img id="114766" src="description/image2.png" alt="" width="584" height="369">
</li><li>
<p>Create a Spanish (es-ES) site collection using the Developer Site template.</p>
</li><li>
<p>Change the <span class="ui">SiteUrl</span> property of the solution to the Spanish site collection.</p>
</li><li>
<p>Repeat the test for the Spanish site collection.</p>
</li><li>
<p>Create a French (fr-FR) site collection using the Developer Site template.</p>
</li><li>
<p>Change the <span class="ui">SiteUrl</span> property of the solution to the French site collection.</p>
</li><li>
<p>Repeat the test for the French site collection. Since the sample does not support French, you should get UI elements in the invariant language, which is English in this sample.</p>
</li></ol>
</div>
</div>
<a name="O15Readme_Troubleshoot"></a><a name="sectionSection5"></a>
<h2 class="heading">Troubleshooting</h2>
<div class="section" id="sectionSection5">
<p>The following table lists common configuration and environment errors that prevent the sample from running or deploying properly, and how to solve them.</p>
<div class="caption"></div>
<div class="tableSection">
<table cellspacing="2" cellpadding="5" width="50%" frame="lhs">
<tbody>
<tr>
<th>
<p>Problem</p>
</th>
<th>
<p>Solution</p>
</th>
</tr>
<tr>
<td>
<p>The app part does not display any content. The app part displays the following error:
<strong>Navigation to the webpage was canceled</strong>.</p>
</td>
<td>
<p>The browser blocked the content page. The solution might be different depending on the browser you are using:</p>
<ul>
<li>
<p>Internet Explorer 9 and 10 display the following message at the bottom of the page:
<strong>Only secure content is displayed</strong>. Click <span class="ui">Show all content</span> to display the app part content.</p>
</li><li>
<p>Internet Explorer 8 shows a dialog box with the following message: <strong>Do you want to view only the webpage content that was delivered securely?</strong>. Click
<span class="ui">No</span> to display the app part content.</p>
</li></ul>
</td>
</tr>
<tr>
<td>
<p>Error &quot;This content cannot be displayed in a frame.&quot; when the user selects the ECB custom action.</p>
</td>
<td>
<p>See this forum discussion: http://social.msdn.microsoft.com/Forums/sharepoint/en-US/fa6abb31-7251-4744-ab14-634cde38a42d/error-when-viewing-apps-that-utilize-webparts-this-content-cannot-be-displayed-in-a-frame?forum=appsforsharepoint</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<a name="O15Readme_Changelog"></a><a name="sectionSection6"></a>
<h2 class="heading">Change log</h2>
<div class="section" id="sectionSection6">
<div class="caption"></div>
<div class="tableSection">
<table cellspacing="2" cellpadding="5" width="50%" frame="lhs">
<tbody>
<tr>
<th>
<p>Version</p>
</th>
<th>
<p>Date</p>
</th>
</tr>
<tr>
<td>
<p>First version</p>
</td>
<td>
<p>July 16, 2012</p>
</td>
</tr>
<tr>
<td>
<p>Revised</p>
</td>
<td>
<p>April 2013</p>
</td>
</tr>
<tr>
<td>
<p>2nd Revision</p>
</td>
<td>
<p>May 2014</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<a name="O15Readme_RelatedContent"></a><a name="sectionSection7"></a>
<h2 class="heading">Related content</h2>
<div class="section" id="sectionSection7">
<ul>
<li>
<p><a href="http://msdn.microsoft.com/en-us/library/b0878c12-27c9-4eea-ae3b-7e79e5a8838d" >Setting up a SharePoint 2013 development environment for apps</a></p>
</li><li>
<p><a href="http://msdn.microsoft.com/library/fp179919.aspx" >How to: Localize apps for SharePoint</a></p>
</li><li>
<p><a href="http://msdn.microsoft.com/en-us/library/bfdd0a58-2cc5-4805-ac89-4bd2fe6f3b09" >Create UX components</a></p>
</li><li>
<p><a href="http://msdn.microsoft.com/en-us/library/d60f409a-b292-4c06-8128-88629091b753" >UX design for apps</a></p>
</li></ul>
</div>
</div>
</div>

</div>


    </div>
</body>
</html>
